<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>骑手管理</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

</head>

<body>
    <div id="app">
        <div class="bs-example" data-example-id="contextual-table">
            <table class="table">
                <thead>
                    <tr>
                        <th></th>
                        <th>索引</th>
                        <th>电话</th>
                        <th>类型</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody v-for="(user,index) in UserList" :key="user.id">
                    <tr :class="addClass(index)">
                        <th></th>
                        <th scope="row">{{index}}</th>
                        <td>{{user.phone}}</td>
                        <td>{{user.type===1? "骑手":"用户"}}</td>
                        <td><button type="button" class="btn btn-info" @click="UserChange(user.id)">修改</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    UserList: [],
                }
            },
            methods: {
                // 请求所有人员数据
                async getAllUserList() {
                    const res = await axios({ method: 'GET', url: '/user', })
                    if (res.data.code === 1) {
                        console.log(res.data.data)
                        this.UserList = res.data.data
                    }
                },
                addClass(i) {
                    if (i % 2 === 0) {
                        return;
                    }
                    if (i % 7 === 1) {
                        return 'active';
                    } else if (i % 7 === 3) {
                        return 'success';
                    } else if (i % 7 === 5) {
                        return 'warning';
                    } else {
                        return 'danger';
                    }
                },
                async UserChange(id) {
                    const res = await axios({ method: 'GET', url: '/user/change?id=' + id, })
                    if (res.data.code === 1) {
                        await this.getAllUserList()
                    }
                }

            },
            mounted() {
                this.getAllUserList()
            }
        })
    </script>
</body>

</html>